<template>
  <div class="banner">
    <el-carousel height="390px" motion-blur>
      <el-carousel-item
        v-for="item in bannerList"
        :key="item.bannerUrl"
        class="banneritem"
      >
        <img :src="item.bannerUrl" alt="" class="images" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="search">
    <el-input placeholder="搜索科室" style="width: 40%; height: 40px;" ></el-input>
    <el-button type="primary" :icon="Search" style="margin-left: 5px; height: 40px;" ></el-button>
  </div>
  <div class="info">
    <div class="left">
      <div class="menus">
        <el-menu
          :default-active="route.fullPath"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item index="/home/Detail" >
            <el-icon><document /></el-icon>
            <span>医院详情</span>
          </el-menu-item>
          <el-menu-item index="/home/Registration">
            <el-icon><Menu /></el-icon>
            <span>预约挂号</span>
          </el-menu-item>
          <el-menu-item index="/home/Notice">
            <el-icon><setting /></el-icon>
            <span>预约须知</span>
          </el-menu-item>
          <el-menu-item index="/home/Stop">
            <el-icon><WarningFilled /></el-icon>
            <span>停诊信息</span>
          </el-menu-item>
          <el-menu-item index="/home/Search">
            <el-icon><Search /></el-icon>
            <span>查询/取消</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="mains">
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </div>
    </div>
    <div class="right">
      <tip></tip>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getBannerListAPI } from "@/api/banner.js";
import { Document, Setting , Menu , WarningFilled , Search} from '@element-plus/icons-vue'
import tip from '@/components/tip/index.vue'
let route = useRoute();
let bannerList = ref([]);
onMounted(() => {
  getBannerList();
});
//获取轮播图
const getBannerList = async () => {
  let result = await getBannerListAPI();
  bannerList.value = result.data;
};
</script>

<style lang="scss" scoped>
.banner {
  .banneritem {
    width: 100%;
    height: 100%;
    .images {
      width: 100%;
      height: 100%;
      
    }
  }
}
.search {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 600px;
  .left {
    flex: 8;
    display: flex;
    .menus {
      flex: 1;
    }
    .mains {
      flex: 8;
      margin-left: 10px;
      margin-bottom: 30px;
     
    }
  }
  .right {
    width: 220px;
   margin-left: 20px;
  }
}
</style>
